<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>bootstrap段落</title>
</head>
<body>
    <!-- 段落 -->
    <p>普通的段落</p>
    <p class="lead">Bootstrap中突出的段落</p>
    <!-- 强调 -->
    <p><b>加粗字体</b></p>
    <p><code>This is computer code</code></p>
    <p><em>强调文本</em></em></p>
    <p><i>斜体文本</i></em></p>
    <p><mark>背景高亮字体</mark></p>
    <p><small>缩小字体</small></p>
    <p><strong>重点强调的字体</strong></p>
    <p>这是<sub>下标</sub>和<sup>上标</sup></p>
    <p><ins>给文本添加下划线</ins></p>
    <p><del>给文字添加删除线</del></p>
    <hr>
    <!-- 文本对齐 -->
    <!-- 水平对齐 -->
    <p class="text-left">左对齐文本</p>
    <p class="text-center">中间对齐文本</p>
    <p class="text-right">右对齐文本</p>
    <!-- 垂直对齐 -->
    <p class="text-justify">垂直对齐</p>
    <hr>
    <!-- 大小写转换 -->
    <p class="text-lowercase">NIIT is leading traning institute</p>
    <p class="text-uppercase">NIIT is leading traning institute</p>
    <p class="text-capitalize">NIIT is leading traning institute</p>
    <!-- 使用CSS修改文本颜色 -->
    <p style="color: blue;">文本</p>
    <!-- 使用类来控制文本颜色 -->
    <p class="text-primary">primary:操作前请详细阅读说明书</p>
    <p class="text-secondary">secondary:这个功能已从最新版本中删除</p>
    <p class="text-success">success:登录成功 </p>
    <p class="text-info">info:您必须同意条款以完成注册 </p>
    <p class="text-warning">warning:您的网络链接有问题</p>
    <p class="text-danger">danger:提交数据发生错误</p>
    <p class="text-muted">Muted:灰色的文本</p>
    <p class="text-dark">dark:黑色的文本</p>
    <!-- 缩写 -->
    <hr>
    <abbr title="World Wide Web">WWW</abbr> <br>
    <abbr title="Hyper Text Markup Language">HTML</abbr>
    <!-- 地址：语义标签 -->
    <hr>
    <address>
        <strong>NIIT Ltd</strong><br>
        上海xxxxxxxx <br>
        <abbr title="Phone">123467895</abbr>
    </address>
    <hr>
    <!-- 引用 -->
    <blockquote class="blockquote">
        <p>为中华之崛起而读书</p>
        <footer class="blockquote-footer">by <cite>周恩来</cite></footer>
    </blockquote>
    <hr>
    <!-- 列表 -->
    <!-- 列表的未样式化：去掉无序列表左边的小点和边距 -->
    <h2>未样式化</h2>
    <ul class="list-unstyled">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>BootStrap</li>
    </ul>
    <!-- 行内无序列表 -->
    <h2>行内无序列表</h2>
    <ul class="list-inline">
        <li class="list-inline-item">HTML</li>
        <li class="list-inline-item">CSS</li>
        <li class="list-inline-item">JavaScript</li>
        <li class="list-inline-item">BootStrap</li>
    </ul>
    <h2>列表对齐</h2>
    <dl class="row">
        <dt class="col-3">HTML</dt>
        <dt class="col-9">HTML用于定义一个网页的框架</dt>
        <dt class="col-3">Bootstrap</dt>
        <dt class="col-9">用于设计响应式网站</dt>
    </dl>
</body>
</html>